<div id="city-bar1" style=" height: 250px"></div>
<div id="ss"></div>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
    $(function () {
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        $.ajax({
            url: "#springUrl('/network/city/bar1')",
            data: {"batchId": "$!{batchId}"},
            type: "POST",
            success: function (text) {
                var d = JSON.parse(text);
                if (d.success && d.data) {
                    require(["echarts", "echarts/chart/bar"], function (ec) {
                        var myChart = ec.init(document.getElementById('city-bar1'), 'macarons');
                        var option = {
                            title: {
                                text: '某地区蒸发量和降水量',
                                subtext: '纯属虚构',
                                show: false
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ['总路程', '总时间', "总成本"]
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    saveAsImage: {show: true}
                                }
                            },
                            calculable: true,
                            xAxis: [
                                {
                                    type: 'category',
                                    data: d.data.x
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    name: '总路程',
                                    type: 'bar',
                                    data: d.data.s1,
                                    markPoint: {
                                        data: [
                                            {type: 'max', name: '最大值'},
                                            {type: 'min', name: '最小值'}
                                        ]
                                    },
                                    markLine: {
                                        data: [
                                            {type: 'average', name: '平均值'}
                                        ]
                                    }
                                },
                                {
                                    name: '总时间',
                                    type: 'bar',
                                    data: d.data.s2
                                }, {
                                    name: '总成本',
                                    type: 'bar',
                                    data: d.data.s3
                                }
                            ]
                        };
                        myChart.setOption(option);
                    });
                }
            }
        })
    });
</script>
